<template>
  <el-card class="box-card scroll-item" v-scroll-reveal.reset shadow="always">
    <div slot="header" class="me-name">
      <i class="iconfont icon-mingpian"></i>
      <span>我的名片</span>
    </div>
    <div class="me-description">
      <p>网名：Mr.Liang| 心若向阳</p>
      <p>职业：软件开发攻城狮</p>
      <p>现居：广东省-佛山市</p>
      <p>Email：953361016@qq.com</p>
      <p>QQ：953361016</p>
    </div>
    <div class="me-tool">
      <i @click="showTool(qq)" :title="qq.title" class="iconfont icon-QQ"></i>
      <!-- <i @click="showTool(github)" :title="github.title" class="iconfont icon-github"></i> -->
      <i @click="showTool(gitee)" :title="gitee.title" class="iconfont icon-gitee-fill-round"></i>
      <i @click="showTool(wechat)" :title="wechat.title" class="iconfont icon-wechat1"></i>
      <i @click="showTool(email)" :title="email.title" class="iconfont icon-email"></i>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Me',
  data () {
    return {
      qq: {
        title: 'QQ', 
        message: '<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1650464351&site=qq&menu=yes">http://wpa.qq.com/msgrd?v=3&uin=1650464351&site=qq&menu=yes</a>'
      },
      github: {
        title: 'github',
        message: '<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1650464351&site=qq&menu=yes">http://wpa.qq.com/msgrd?v=3&uin=1650464351&site=qq&menu=yes</a>'
      },
      gitee: {
        title: 'gitee',
        message: '<a target="_blank" href="https://gitee.com/yong-top">https://gitee.com/yong-top</a>'
      },
      wechat: {
        title: 'wechat',
        message: '<a target="_blank" href="https://gitee.com/seu-lfh/vblog.git">https://gitee.com/seu-lfh/vblog.git</a>'
      },
      email: {
        title: 'email',
        message: '<a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=Fns4b3l4cVZweW57d396OHV5ew">http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=Fns4b3l4cVZweW57d396OHV5ew</a>'
      }
    }
  },
  methods:{
      showTool(tool) {
        this.$message({
          duration: 3000,
          showClose: true,
          dangerouslyUseHTMLString: true,
          offset:100,
          message: '<strong>' + tool.message + '</strong>'
        });
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.me-name
  i 
    font-size 20px
    color #ff9401
    font-weight bold
  span
    font-weight bold
.me-description
  text-align left 
  p
    padding 3px 0
    line-height 1.5
  span
    padding 0 5px
.me-tool
  text-align center
  padding-top 10px
  i
    cursor pointer
    padding 4px 10px
    font-size 30px

</style>
